<template>
    <div class="myOrder flexv">
        <!-- 头部 -->
        <pubHead title="核销订单"></pubHead>

        <!-- 栏目 -->
        <div class="types_box">
            <div class="types flex">
                <div class="type flex1 tc" @click="changeType(1)" :class="type == 1 ? 'on' : ''">全部</div>
                <div class="type flex1 tc" @click="changeType(10)" :class="type == 10 ? 'on' : ''">待付款</div>
                <div class="type flex1 tc" @click="changeType(20)" :class="type == 20 ? 'on' : ''">待消费</div>
                <div class="type flex1 tc" @click="changeType(40)" :class="type == 40 ? 'on' : ''">待评价</div>
                <div class="type flex1 tc" @click="changeType(50)" :class="type == 50 ? 'on' : ''">已完成</div>
            </div>
        </div>

        <div class="lists flexv" v-if="!isNone">
            <van-list v-model="loading" :finished="finished" @load="getData">
                <div class="list flexv mt2" @click="toDetail(item.id)" v-for="(item,index) in list" :key="index">
                    <div class="tops jus-b">
                        <span>订单编号：{{item.order_no}}</span>
                        <span class="status" v-if="item.order_status == 0">已取消</span>
                        <span class="status" v-if="item.order_status == 10">待付款</span>
                        <span class="status" v-if="item.order_status == 20">待消费</span>
                        <span class="status" v-if="item.order_status == 40">待评价</span>
                        <span class="status" v-if="item.order_status == 50">已完成</span>
						<span class="status" v-if="item.order_status == 80">已过期</span>
                    </div>

                    <div class="goods_list flex">
                        <img :src="item.ticket_image" class="goods_img" alt="">

                        <div class="goods_info flex1 flexv jus-b">
                            <p class="twoline title bold" style="color: #1989FA;">{{item.ticket_name}}</p>
							<p class="twoline title">{{item.cate_name}}</p>
                            <span class="spec oneline" v-if="item.scenic_ticket_name">{{item.scenic_ticket_name}}</span>

                            <div class="ali-b jus-b others">
                                <span class="price" v-if="!item.marketing_type">单价:￥{{item.good_price}}</span>
								<span class="price" v-if="item.marketing_type==2">秒杀价:￥{{item.marketing_price}}</span>
								<span class="price" v-if="item.marketing_type==3">今日特价:￥{{item.marketing_price}}</span>
								<span class="price" v-if="item.marketing_type==4">团购价:￥{{item.marketing_price}}</span>
								<span class="price" v-if="item.marketing_type==5">团购价:￥{{item.marketing_price}}</span>
								<span class="price" v-if="item.marketing_type==6">砍购价:￥{{item.marketing_price}}</span>
                                <span class="num">x{{item.total_num}}</span>
                            </div>
                        </div>
                    </div>

                    <div class="order_info jus-e">
                        <span class="note">共{{item.total_num}}件商品</span>
						<span class="note" v-if="item.coupon_price>0">&nbsp;优惠{{item.coupon_price}}元</span>
						  <span class="note">&nbsp;合计：</span>
                        <span class="total_price">￥{{item.total_price}}</span>
                    </div>

                    <div class="act_btns jus-e">
                        <div class="act_btn tc" v-if="item.order_status != 10">查看详情</div>
                        <div class="act_btn tc" v-if="item.order_status == 10" @click.stop="cancelOrder(item.id,index)">取消订单</div>
                        <div class="act_btn tc active" v-if="item.order_status == 10" @click.stop="toPay(item)">立即支付</div>
                        <div class="act_btn tc active" v-if="item.order_status == 20" @click.stop="toUse(item.id)">立即消费</div>
                        <div class="act_btn tc active" v-if="item.order_status == 40" @click.stop="toEva(item)">去评价</div>
                        <div class="act_btn tc active" v-if="item.order_status == 50 || item.order_status == 0 || item.order_status == 80" @click.stop="delOrder(item.id,index)">删除订单</div>
					</div>
                </div>
            </van-list>
        </div>

        <!-- 空列表 -->
        <div class="empty_box flexc flexv" v-else>
            <img src="@/assets/nor.png" alt="">
            <p>还没有订单哦~</p>
        </div>

    </div>
</template>
<script>
import Vue from 'vue';
import {  Toast, List, Dialog } from 'vant';
import { orderlists, orderdel, ordercancel } from '@/request/api.js';
import pubHead from '@/components/head';

Vue.use(Toast,List, Dialog);
export default {
    data(){
        return{
            isNone: false, // 是否为空
            type: 1, // 类型 1全部 10待付款 20待消费 40待评价 50已完成 0已取消
            // 列表相关
            list: [], // 列表
            page: 0,
            pagesize: 10,
            finished: false,
            loading: false,
        }
    },
    components: {
        pubHead,
        "van-list": List
    },
    created(){
        this.type = this.$route.query.id;
        this.$loading();
    },
    methods: {
        // 获取数据
        getData(){
            this.loading = false;
            orderlists({
                token: localStorage.getItem('token') ? localStorage.getItem('token') : '',
                status: this.type == 1 ? '' : this.type,
                page: ++this.page,
                pagesize: this.pagesize
            }).then(res =>{
                if(res.code == 1){
                    this.finished = Number(res.data.list.length) >= Number(this.pagesize) ? false : true;
                    if(res.data.list.length > 0){
                        this.list = [...this.list,...res.data.list];
                    }
                    if(this.list.length > 0){
                        this.isNone = false
                    }else{
                        this.isNone = true;
                    }
					this.loading = false
					Toast.clear()
                }else{
					this.loading = false
					this.finished = true
				}
            })
        },
        // 切换栏目
        changeType(type){
            this.type = type;
            this.page = 0;
            this.list = [];
            this.$loading();
            this.getData();
        },
        // 去订单详情
        toDetail(id){
            this.$router.push('/orderDetail?id='+id)
        },
        // 删除订单
        delOrder(id,index){
            Dialog.confirm({
                title: '温馨提示',
                message: '您确定要删除该订单吗?',
                confirmButtonText: '删除',
                confirmButtonColor: '#53AB2A'
            }).then(res =>{
                orderdel({
                    token: localStorage.getItem('token'),
                    order_id: id
                }).then(data =>{
                    this.$tip(data.msg);
                    if(data.code == 1){
                        this.list.splice(index,1);
                        if(this.list.length < 1){
                            this.isNone = true
                        }
                    }
                })
            }).catch(err =>{
            })
        },
        // 取消订单
        cancelOrder(id,index){
            Dialog.confirm({
                title: '温馨提示',
                message: '您确定要取消该订单吗?',
                confirmButtonColor: '#53AB2A'
            }).then(res =>{
                ordercancel({
                    token: localStorage.getItem('token'),
                    order_id: id
                }).then(data =>{
                    this.$tip(data.msg);
                    if(data.code == 1){
                        this.list[index].order_status = 0;
                    }
                })
            }).catch(err =>{
            })
        },
        // 去支付
        toPay(item){
            let data= {
                order_no: item.order_no,
                pay_money: item.total_price
            }
            this.$router.push('/orderPay?info='+JSON.stringify(data))
        },
        // 去评价
        toEva(item){
            this.$router.push({name:'Evaluate',params:item});
        },
        // 去消费
        toUse(id){
            this.$router.push('/writeoffcode?id=' + id)
        },
    },
}
</script>
<style lang="less" scoped>
.myOrder{
    min-height: 100vh;
    background-color: #f5f5f5;
    // 栏目
    .types_box{
        width: 100%;
        height: 0.9rem;
        .types{
            width: 100%;
            max-width: 750px;
            height: 0.9rem;
            margin: 0 auto;
            position: fixed;
            z-index: 100;
            top: 0.88rem;
            left: 0;
            right: 0;
            background-color: #fff;
            .type{
                margin: 0 0.2rem;
                font-size: 0.3rem;
                line-height: 0.9rem;
                color: #333;
                border-bottom: 0.04rem solid transparent;
            }
            .type.on{
                color: #53AB2A;
                border-bottom-color: #53AB2A;
            }
        }
    }
    // 列表
    .lists{
        .list{
            padding: 0.3rem;
            background-color: #fff;
            .tops{
                font-size: 0.28rem;
                line-height: 120%;
                color: #666;
                .status{
                    color: #53AB2A;
                }
            }
            .goods_list{
                margin-top: 0.3rem;
                .goods_img{
                    width: 1.8rem;
                    height: 1.8rem;
                    border-radius: 0.1rem;
                }
                .goods_info{
                    margin-left: 0.2rem;
                    padding: 0.06rem 0;
                    .title{
                        font-size: 0.28rem;
                        line-height: 150%;
                        color: #333;
                    }
                    .spec{
                        margin-right: auto;
                        font-size: 0.24rem;
                        line-height: 120%;
                        color: #999;
                    }
                    .others{
                        .price{
                            font-size: 0.28rem;
                            line-height: 120%;
                            color: #ee1c1a;
                        }
                        .num{
                            font-size: 0.28rem;
                            line-height: 120%;
                            color: #333;
                        }
                    }
                }
            }
            .order_info{
                margin-top: 0.3rem;
                .note{
                    font-size: 0.28rem;
                    line-height: 120%;
                    color: #333;
                }
                .total_price{
                    font-size: 0.28rem;
                    line-height: 120%;
                    color: #ee1c1a; 
                }
            }
            .act_btn{
                width: 1.52rem;
                height: 0.54ren;
                margin: 0.5rem 0 0 0.2rem;
                border: 1px solid #c9c9c9;
                border-radius: 0.27rem;
                font-size: 0.26rem;
                line-height: 0.52rem;
                color: #333;
            }
            .act_btn.active{
                border-color: #53AB2A;
                color: #53AB2A;
            }
        }
    }
    // 空列表
    .empty_box{
        height: calc(100vh - 1.78rem);
        img{
            width: 3.24rem;
            height: 3.06rem;
            margin: 0 auto;
        }
        p{
            margin-top: 0.4rem;
            font-size: 0.32rem;
            line-height: 120%;
            color: #999;
        }
    }
}
</style>